<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务完成报告</title>
    <link rel="stylesheet" th:href="@{/lib/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/lib/bootstrap-icons/font/bootstrap-icons.css}">
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <style>
        .report-container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .existing-report {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .report-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .report-time {
            color: #6c757d;
            font-size: 0.9em;
        }
        .edit-mode {
            display: none;
        }
        .view-mode {
            display: block;
        }
        .btn-edit, .btn-save, .btn-cancel {
            margin-left: 10px;
        }
        .alert {
            margin-top: 20px;
        }
        .photo-upload-area {
            border: 2px dashed #dee2e6;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            margin-bottom: 20px;
            background-color: #f8f9fa;
            transition: all 0.3s ease;
        }
        .photo-upload-area:hover {
            border-color: #007bff;
            background-color: #e3f2fd;
        }
        .photo-upload-area.dragover {
            border-color: #007bff;
            background-color: #e3f2fd;
        }
        .photo-preview {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }
        .photo-item {
            position: relative;
            width: 150px;
            height: 150px;
            border: 1px solid #dee2e6;
            border-radius: 8px;
            overflow: hidden;
            background-color: #fff;
        }
        .photo-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .photo-item .photo-remove {
            position: absolute;
            top: 5px;
            right: 5px;
            background: rgba(220, 53, 69, 0.9);
            color: white;
            border: none;
            border-radius: 50%;
            width: 25px;
            height: 25px;
            font-size: 12px;
            cursor: pointer;
        }
        .photo-item .photo-description {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 5px;
            font-size: 12px;
            text-align: center;
        }
        .existing-photos {
            margin-top: 20px;
        }
        .photo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }
        .photo-card {
            border: 1px solid #dee2e6;
            border-radius: 8px;
            overflow: hidden;
            background-color: #fff;
        }
        .photo-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        .photo-card .card-body {
            padding: 10px;
        }
        .photo-card .card-title {
            font-size: 14px;
            margin-bottom: 5px;
        }
        .photo-card .card-text {
            font-size: 12px;
            color: #6c757d;
        }
        .file-input-wrapper {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }
        .file-input-wrapper input[type=file] {
            position: absolute;
            left: -9999px;
        }
        .file-input-wrapper .btn {
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="report-container">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2><i class="bi bi-file-text"></i> 任务完成报告</h2>
                <a href="/ercms/terminal" class="btn btn-outline-secondary">
                    <i class="bi bi-arrow-left"></i> 返回终端
                </a>
            </div>

            <!-- 事件信息 -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-info-circle"></i> 事件信息</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>事件ID:</strong> <span id="eventId"></span></p>
                            <p><strong>事件类型:</strong> <span id="eventType"></span></p>
                            <p><strong>事件状态:</strong> <span id="eventStatus"></span></p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>发生时间:</strong> <span id="eventTime"></span></p>
                            <p><strong>地点:</strong> <span id="eventLocation"></span></p>
                            <p><strong>描述:</strong> <span id="eventDescription"></span></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 现有报告显示区域 -->
            <div id="existingReportContainer" class="existing-report" style="display: none;">
                <div class="report-header">
                    <h5><i class="bi bi-file-earmark-check"></i> 已提交的报告</h5>
                    <div>
                        <span class="report-time" id="reportTime"></span>
                        <button class="btn btn-sm btn-outline-primary btn-edit" onclick="enableEdit()">
                            <i class="bi bi-pencil"></i> 修改
                        </button>
                    </div>
                </div>
                
                <!-- 查看模式 -->
                <div id="viewMode" class="view-mode">
                    <div class="form-group">
                        <label><strong>报告内容:</strong></label>
                        <div class="form-control-plaintext" id="reportContentDisplay"></div>
                    </div>
                    
                    <!-- 现有照片显示 -->
                    <div id="existingPhotos" class="existing-photos">
                        <h6><i class="bi bi-images"></i> 报告照片</h6>
                        <div id="existingPhotosGrid" class="photo-grid">
                            <!-- 照片将通过JavaScript动态添加-->
                        </div>
                    </div>
                </div>
                
                <!-- 编辑模式 -->
                <div id="editMode" class="edit-mode">
                    <div class="form-group">
                        <label for="editReportContent"><strong>报告内容:</strong></label>
                        <textarea class="form-control" id="editReportContent" rows="6" placeholder="请详细描述任务完成情况，包括处理过程、结果等..." required></textarea>
                    </div>
                    
                    <!-- 照片上传区域 -->
                    <div class="form-group mt-3">
                        <label><strong>添加照片:</strong></label>
                        <div class="photo-upload-area" id="editPhotoUploadArea">
                            <i class="bi bi-cloud-upload" style="font-size: 2rem; color: #6c757d;"></i>
                            <p class="mt-2">拖拽照片到此处或点击选择文件</p>
                            <div class="file-input-wrapper">
                                <input type="file" id="editPhotoInput" multiple accept="image/*">
                                <button class="btn btn-outline-primary">选择照片</button>
                            </div>
                            <small class="text-muted">支持 JPG、PNG、GIF 格式，单个文件最大10MB</small>
                        </div>
                        <div id="editPhotoPreview" class="photo-preview">
                            <!-- 照片预览将通过JavaScript动态生成-->
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <button class="btn btn-primary btn-save" onclick="saveReport()">
                            <i class="bi bi-check"></i> 保存修改
                        </button>
                        <button class="btn btn-secondary btn-cancel" onclick="cancelEdit()">
                            <i class="bi bi-x"></i> 取消
                        </button>
                    </div>
                </div>
            </div>

            <!-- 新报告提交区域-->
            <div id="newReportContainer">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-plus-circle"></i> 提交完成报告</h5>
                    </div>
                    <div class="card-body">
                        <form id="reportForm">
                            <div class="form-group">
                                <label for="reportContent"><strong>报告内容:</strong></label>
                                <textarea class="form-control" id="reportContent" name="content" rows="6" 
                                          placeholder="请详细描述任务完成情况，包括处理过程、结果等..." required></textarea>
                            </div>
                            
                            <!-- 照片上传区域 -->
                            <div class="form-group mt-3">
                                <label><strong>添加照片:</strong></label>
                                <div class="photo-upload-area" id="photoUploadArea">
                                    <i class="bi bi-cloud-upload" style="font-size: 2rem; color: #6c757d;"></i>
                                    <p class="mt-2">拖拽照片到此处或点击选择文件</p>
                                    <div class="file-input-wrapper">
                                        <input type="file" id="photoInput" multiple accept="image/*">
                                        <button class="btn btn-outline-primary">选择照片</button>
                                    </div>
                                    <small class="text-muted">支持 JPG、PNG、GIF 格式，单个文件最大10MB</small>
                                </div>
                                <div id="photoPreview" class="photo-preview">
                                    <!-- 照片预览将通过JavaScript动态生成-->
                                </div>
                            </div>
                            
                            <div class="mt-3">
                                <button type="submit" class="btn btn-success">
                                    <i class="bi bi-send"></i> 提交报告
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 消息提示 -->
            <div id="alertContainer"></div>
        </div>
    </div>

    <script th:src="@{/lib/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <script th:src="@{/js/auth.js}"></script>
    <script th:src="@{/js/task-report.js}"></script>
</body>
</html> 
